<%@ page import="com.qimei.onerice.service.impl.DishServiceImpl" %>
<%@ page import="com.qimei.onerice.entity.Dish" %>
<%@ page import="com.qimei.onerice.service.DishService" %>
<%@ page import="com.qimei.onerice.entity.Customer" %>
<%@ page import="com.qimei.onerice.entity.Comment" %>
<%@ page import="java.util.List" %>
<%@ page import="com.qimei.onerice.service.impl.CommentServiceImpl" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: aaa
  Date: 2023/12/14
  Time: ฅ(΅•ㅅ•΅❀)ฅ 20:27
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>菜品详情页</title>

	<link rel="stylesheet" href="<c:url value="/css/bootstrap.min.css"/>">
	<script src="<c:url value="/js/bootstrap.bundle.min.js"/>"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<style>
	</style>
</head>

<body>
<main class="container">
	<div class="container-fluid p-4 p-md-5 mb-4 rounded text-bg-dark" style="height: 95vh;">
		<%
			// 获取传递的dishId
			String dishId = request.getParameter("dishId");

			Dish dish = new DishServiceImpl().getDishById(Integer.parseInt(dishId));
			pageContext.setAttribute("dish", dish);
		%>
		<div class="row rounded"
		     style="background: url('<c:url value='/img/dish/${dish.dishImage}'/>') center center no-repeat; background-size: cover; height: 100%;">
			<div class="col-md-5 offset-md-7 p-4 rounded"
			     style="background-color: rgba(0, 0, 0, 0.7); height: 100%;">
				<h1 class="text-white mb-4" style="margin-top: 30px;">${dish.name}</h1>

				<div class="card text-white bg-dark mb-3" >
					<div class="card-header">菜品介绍</div>
					<div class="card-body">
						<p class="card-text">${dish.description}</p>
					</div>
				</div>

				<div class="card text-white bg-dark mb-3">
					<div class="card-header">菜品信息</div>
					<div class="card-body">
						<div class="row">
							<div class="col-md-6">
								<p class="card-text">价格: ${dish.price}￥</p>
								<p class="card-text">评分: ★★★★☆</p>
							</div>
						</div>
					</div>
				</div>

				<%
					Customer customer = (Customer) session.getAttribute("user");
					DishService dishDishService = new DishServiceImpl();
				%>
				
				<div class="row">
					<div class="col-md-12 text-center" style="margin-top: 30px;">
						<a href="<c:url value="/order?customerId=${sessionScope.user.customerId}&dish=${dish.dishId}&action=add"/>" class="btn btn-primary w-50 mx-auto">加入购物车</a>
					</div>
				</div>

			</div>
		</div>
	</div>

	<div class="row g-5">
		<div class="col-md-8">
			<h3 class="pb-4 mb-4 fst-italic border-bottom">
				菜品评论
			</h3>

			<%
				List<Comment> commentList = new CommentServiceImpl().getCommentListByDishId(Integer.parseInt(dishId));
				pageContext.setAttribute("commentList", commentList);
			%>
			<c:forEach var="comment" items="${commentList}">
				<article class="blog-post">
					<div class="d-flex align-items-center mb-3">
						<img src="<c:url value="/img/customer/${comment.customerImage}"/>" alt="User Avatar" class="rounded-circle me-2" width="50" height="50">
						<h4 class="blog-post-title mb-0">${comment.customerName}</h4>
					</div>

					<p class="blog-post-meta">${comment.commentDate} 发表</p>

					<p>${comment.comment}</p>
					<hr>
				</article>
			</c:forEach>

			<!-- 评论输入框部分 -->
			<form id="commentForm" class="form-horizontal" action="<c:url value="/comment?dishId=${dish.dishId}&customerId=${sessionScope.user.customerId}"/>" method="post"> <!-- 设置表单的 action 和 method -->
				<div id="commentInput" style="display: none;"> <!-- 默认隐藏 -->
					<textarea id="newComment" name="comment" rows="4" cols="50"></textarea> <!-- 将 textarea 的 id 改为 name，并添加 name 属性 -->
					<br>
					<!-- 将按钮类型从普通按钮改为提交按钮，移除 onclick 事件 -->
					<button type="submit" class="btn btn-outline-primary rounded-pill" style="margin-top: 10px">提交评论</button>
					<button class="btn btn-outline-primary rounded-pill" onclick="cancel()" style="margin-top: 10px">取消</button>
				</div>
			</form>

				<nav class="blog-pagination" aria-label="Pagination">
					<button class="btn btn-outline-primary rounded-pill" onclick="showCommentInput()" style="margin-top: 10px">发表评论</button>
				</nav>


		</div>

		<div class="col-md-4">
			<div class="position-sticky" style="top: 2rem;">
				<div class="p-4 mb-3 bg-light rounded">
					<h4 class="fst-italic">About</h4>
					<p class="mb-0">我们是一个好公司</p>
				</div>

				<div class="p-4">
					<h4 class="fst-italic">菜品排行榜</h4>
					<ol class="list-unstyled mb-0">
							<li><a href="#">啊啊啊啊啊啊</a></li>
					</ol>
				</div>

				<div class="p-4">
					<h4 class="fst-italic">Elsewhere</h4>
					<ol class="list-unstyled">
						<li><a href="#">GitHub</a></li>
						<li><a href="#">Twitter</a></li>
						<li><a href="#">Facebook</a></li>
					</ol>
				</div>
			</div>
		</div>
	</div>

</main>
<script>
	// 显示评论输入框的函数
	function showCommentInput() {
		document.getElementById("commentInput").style.display = "block";
	}

	function cancel() {
		document.getElementById("commentInput").style.display = "none";
		document.getElementById("commentInput").value = "";
	}
</script>
<jsp:include page="/view/common/footer.jsp"></jsp:include>
</body>

</html>
